<template >
  <div class="state">
    <div class="btn">
      <van-button type="success" class="left" @click="loga">登录</van-button>
      <van-button type="default" class="right" @click="sign">注册</van-button>
    </div>
  </div>
  <Popup v-model:show="show" closeable close-icon-position="top-left">
    <div class="Register" v-if="title == '注册'">
      <p>手机号注册</p>
      <div>
        <van-form @submit="Regisa" validate-trigger="onSubmit">
          <div class="one">
            <van-field
              v-model="user.nickname"
              label="昵称"
              placeholder="例如：陈晨"
              :rules="[{ required: true, message: '请填写昵称' }]"
            />
            <van-uploader
              :after-read="afterRead"
              preview-size="4rem"
              :max-count="1"
              v-model="fileList"
              multiple
            />
          </div>

          <van-field
            label="国家/地区"
            disabled
            placeholder="中国（+86）"
            class="custom-placeholder-color"
          />
          <van-field
            v-model="user.username"
            label="手机号"
            placeholder="请填写手机号"
            :rules="[
              { required: true, pattern, message: '请输入正确的手机号' },
            ]"
          />
          <van-field
            v-model="user.password"
            label="密码"
            placeholder="请填写密码"
            :rules="[
              { required: true, message: '请填写密码' },
              {
                pattern: /^(?=.*[0-9])(?=.*[a-zA-Z]).{10,}$/,
                message: '至少10个字符包含字母和数字',
              },
            ]"
          />
          <div class="checkbox">
            <van-icon
              name="passed"
              v-if="agreement"
              @click="agreement = !agreement"
              size="18px"
            />
            <div class="Circle" v-else @click="agreement = !agreement"></div>

            <p>
              我已阅读并同意
              <a href="#" :style="{ color: 'blue' }">软件许可及服务协议</a>
            </p>
          </div>
          <van-button color="#009900" block native-type="Regisa"
            >注册</van-button
          >
        </van-form>
      </div>
    </div>
    <div v-else>
      <div>
        <!-- <Popup v-model:show="show" closeable close-icon-position="top-left"> -->

        <div class="sho" v-if="active == 'tab1'">
          <h3>手机号登录</h3>
          <van-form @submit="xia">
            <van-cell-group inset>
              <!-- 通过 pattern 进行正则校验 -->
              <van-field
                label="国家/地址"
                placeholder="中国（+86）"
                readonly
                class="input2"
              />

              <van-field
                v-model="user1.username"
                name="phone"
                label="手机号"
                placeholder="手机号"
                :rules="[
                  { required: true, pattern, message: '请输入正确内容' },
                ]"
              />
            </van-cell-group>
            <div class="wx">用微信号/QQ号/邮箱登录</div>
            <van-button block type="success" native-type="submit">
              下一步
            </van-button>
          </van-form>
        </div>

        <div v-if="active == 'tab2'" class="den">
          <h3>手机号登录</h3>
          <van-form @submit="denlu">
            <van-cell-group inset>
              <van-field
                label="手机号"
                v-model="user1.username"
                readonly
                placeholder="+86"
              />

              <van-field
                v-model="user1.password"
                type="password"
                name="密码"
                label="密码"
                placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]"
              />
            </van-cell-group>
            <div class="wx">用短信验证登录</div>
            <van-button block type="success" native-type="submit">
              提交
            </van-button>
          </van-form>
        </div>

        <!-- </Popup> -->
      </div>
    </div>
  </Popup>
</template>

<script setup>
import { ref, reactive, watch } from "vue";
import Popup from "@/components/Popup.vue";
import { register } from "../stores/api";
import { useRoute, useRouter } from "vue-router";
import { logina } from "../API/api";
const router = useRouter();
const active = ref("tab1");
const user1 = reactive({
  username: "",
  password: "",
});
const show = ref(false);
watch(show, (aaa) => {
  if (!aaa) {
    active.value = "tab1";
  }
});

const denlu = async () => {
  const res = await logina(user1);
  console.log(res);
  if (res.code === 0) {
    localStorage.setItem("access_token", res.data.access_token);
    localStorage.setItem("refresh_token", res.data.refresh_token);
    router.push("/home");
  } else {
    alert(res.msg);
  }
};

const xia = () => {
  active.value = "tab2";
};

//注册

const sign = () => {
  title.value = "注册";
  show.value = true;
};

const loga = () => {
  title.value = "登录";
  show.value = true;
};

//img
const fileList = ref([]);

const title = ref("");

let agreement = ref(false);
const user = reactive({
  nickname: "",
  username: "",
  password: "",
});

let formdata = new FormData();
const afterRead = (file) => {
  user.avatar = file.content;
};

//注册
const Regisa = async () => {
  if (agreement.value) {
    if (!fileList.value[0]) {
      showNotify("请上传头像");
      return;
    }
    // console.log(user);

    formdata.append("user", JSON.stringify(user));
    let res = await register(user);
    console.log(res);
    if (res.data.code == 0) {
      showNotify({
        message: "注册成功,请登录",
        background: "#009900",
      });
      show.value = false;
      user.name = "";
      user.phone = "";
      user.password = "";
      fileList.value = [];
      agreement.value = false;
    } else {
      showNotify(res.data.msg);
    }
  } else {
    showNotify("请阅读并同意协议");
  }
};

const pattern = /^1[3456789]\d{9}$/;
</script>



<style scoped>
.state {
  width: 100%;
  min-height: 100vh;
  background-image: url(../../public/bj.jpeg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.btn {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 底部 */
  position: fixed;
  bottom: 0;
}
.right {
  width: 90px;
  height: 40px;
  color: #5ec993;
  margin-left: 130px;
}
.left {
  width: 90px;
  height: 40px;
}
.Register {
  width: 92%;
  height: 400px;
  margin: 15% auto;
}
.Register p {
  font-size: 18px;
}
:deep(
    .custom-placeholder-color .van-field__control::-webkit-input-placeholder
  ) {
  color: #009900;
}
:deep(.van-field__control:disabled),
:deep(.van-field__control[disabled]) {
  color: #009900;
  opacity: 1;
  -webkit-text-fill-color: #009900;
  -webkit-opacity: 1;
}
:deep(.van-field--disabled .van-field__label) {
  color: black;
}
.checkbox {
  display: flex;
  align-items: center;
  margin: auto;
  width: 100%;
  height: 50px;
  justify-content: center;
}
.checkbox p {
  font-size: 12px;
}
.one {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
.Circle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid black;
  margin-right: 5px;
}
.sho {
  margin: 90px 20px 0 20px;
}

.sho h3 {
  margin-left: 30px;
  margin-bottom: 50px;
}

.guo {
  height: 40px;
  margin-top: 50px;
  border-bottom: 1px solid #ccc;
}

.guo1 {
  margin-left: 5px;
}

.guo2 {
  margin-left: 10px;
  color: #84cc00;
}

.deng {
  width: 100%;
  height: 50px;
  margin-top: 20px;
  background-color: #009900;
  color: #fff;
  border: none;
  border-radius: 5px;
}

.den {
  margin: 90px 20px 0 20px;
}

.den h3 {
  margin-left: 30px;
  margin-bottom: 50px;
}

.wx {
  margin-top: 20px;
  margin-bottom: 20px;
  color: #596c96;
  margin-left: 30px;
}

.box2 {
  margin-left: 10px;
  color: #dbd0cc;
}

::v-deep .input2 .van-field__control::-webkit-input-placeholder {
  color: red;
}
</style>